<template>
  <div class="album">
    <div class="conten" v-for="(item, index) in list" :key="index" @click="$router.push('/albuminfo/'+item.id)">
      <img class="bg" src="../../assets/disk.png" alt="" />
      <img class="img" v-lazy="item.picUrl" />
      <p>{{ item.name }}</p>
      <p>{{ item.publishTime | unix2Time }}</p>
    </div>
  </div>
</template>
<script>
export default {
  props: ["list"],
};
</script>
<style lang="less" scoped>
.album {
  display: flex;
  flex-wrap: wrap;
  .conten {
    position: relative;
    margin: 20px 50px 0 0;

    &:nth-child(4n) {
      margin-right: 0;
    }
    .bg {
      width: 140px;
      border-radius: 50%;
      position: absolute;
      z-index: -1;
      left: 20px;
    }
    .img {
      width: 140px;
    }
    p {
      font-size: 12px;
      margin-top: 5px;
      max-width: 127px;
      &:last-child {
        color: #888;
      }
    }
  }
}
</style>
